<template>
<div id="nav">
    <img src="./assets/logo.png"><br>
    <router-link to="/" active-class="active">主页</router-link> |
    <router-link to="/about" active-class="active">关于</router-link> |
    <router-link :to="`/user/${userId}`" active-class="active">
    用户
    </router-link> 
  </div>
  <router-view/>
</template>

<script>
import { reactive, toRefs } from 'vue'
export default {
  setup () {
    const state = reactive({
      userId: 'lb' + Math.floor(Math.random() * 10)
    })
   
    return {
      ...toRefs(state),
    }
  }
}
</script>

<style scoped>
 #nav {
    text-align: center;
  }
  .active{
    color: #f00;
  }
</style>